<template>
  <a-spin tip="加载中..." :spinning="loading">
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <a-card size="small" :bordered="false" title="CPU">
          <a-descriptions v-if="!loading" size="small" :column="2" bordered>
            <a-descriptions-item label="核心数">{{ server.cpu.cpuNum }}</a-descriptions-item>
            <a-descriptions-item label="用户使用率">{{ server.cpu.used }}%</a-descriptions-item>
            <a-descriptions-item label="系统使用率">{{ server.cpu.sys }}%</a-descriptions-item>
            <a-descriptions-item label="当前空闲率">{{ server.cpu.free }}%</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card size="small" :bordered="false" title="内存(JVM/总内存)">
          <a-descriptions v-if="!loading" size="small" :column="2" bordered>
            <a-descriptions-item label="总内存">{{ server.jvm.total }}M / {{ server.mem.total }}G</a-descriptions-item>
            <a-descriptions-item label="已用内存">{{ server.jvm.used }}M / {{ server.mem.used }}G</a-descriptions-item>
            <a-descriptions-item label="剩余内存">{{ server.jvm.free }}M / {{ server.mem.free }}G</a-descriptions-item>
            <a-descriptions-item label="使用率"> {{ server.jvm.usage }}% / {{ server.mem.usage }}%</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card size="small" :bordered="false" title="服务器信息">
          <a-descriptions v-if="!loading" size="small" :column="2" bordered>
            <a-descriptions-item label="服务器名称">{{ server.sys.computerName }}</a-descriptions-item>
            <a-descriptions-item label="操作系统">{{ server.sys.osName }}</a-descriptions-item>
            <a-descriptions-item label="服务器IP">{{ server.sys.computerIp }}</a-descriptions-item>
            <a-descriptions-item label="系统架构">{{ server.sys.osArch }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card size="small" :bordered="false" title="Java虚拟机信息">
          <a-descriptions v-if="!loading" size="small" :column="2" bordered>
            <a-descriptions-item label="Java名称">{{ server.jvm.name }}</a-descriptions-item>
            <a-descriptions-item label="Java版本">{{ server.jvm.version }}</a-descriptions-item>
            <a-descriptions-item label="启动时间">{{ server.jvm.startTime }}</a-descriptions-item>
            <a-descriptions-item label="运行时长">{{ server.jvm.runTime }}</a-descriptions-item>
            <a-descriptions-item label="安装路径" :span="2">{{ server.jvm.home }}</a-descriptions-item>
            <a-descriptions-item label="项目路径" :span="2">{{ server.sys.userDir }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="24">
        <a-card size="small" :bordered="false" title="磁盘状态">
          <a-table :data-source="tableDataSource" :columns="tableColumns" size="small" :pagination="false">
            <template #bodyCell="{ column, text }">
              <template v-if="column.key === 'usage'">
                {{ text }}%
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script name="MonitorServer" lang="ts" setup>
import { getServerInfo } from "@/api/monitor/server";

const loading = ref<boolean>(true);
const server = ref({});
const tableColumns = ref<TableColumn[]>([
  {
    key: "dirName",
    dataIndex: "dirName",
    title: "盘符路径"
  },
  {
    key: "sysTypeName",
    dataIndex: "sysTypeName",
    title: "文件系统"
  },
  {
    key: "typeName",
    dataIndex: "typeName",
    title: "盘符类型"
  },
  {
    key: "total",
    dataIndex: "total",
    title: "总大小"
  },
  {
    key: "free",
    dataIndex: "free",
    title: "可用大小"
  },
  {
    key: "used",
    dataIndex: "used",
    title: "已用大小"
  },
  {
    key: "usage",
    dataIndex: "usage",
    title: "已用百分比"
  }
]);
const tableDataSource = ref([]);
const handleLoadData = () => {
  loading.value = true;
  getServerInfo()
    .then(response => {
      server.value = response.data;
      tableDataSource.value = response.data.sysFiles;
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  handleLoadData();
});
</script>
